<template>
  <div>
      <div class="myRow">
        <div>
          <i-button class="myButton" size="small" type="info" ghost icon="md-add-circle"  @click="modal = true">新增</i-button>
          <i-button :disabled="selectList.length === 0" class="myButton" size="small" type="error" ghost icon="md-trash" @click="deleteList()">批量删除</i-button>
        </div>
        <div>
          <Input size="small" suffix="ios-search" placeholder="Enter text" style="width: auto" />
        </div>
      </div>
      <i-table :loading="loading" border ref="selection" :columns="columns4" :data="listData.listT" @on-selection-change="selectChange"></i-table>
      <div class="footPage">
        <Page @on-change="changePage" :total="listData.recordCount" :page-size="listData.pageSize" :current="pageIndex"/>
      </div>
      <Modal
        v-model="modal"
        title="新增页面">
        <div>
          <i-form :model="addData" label-position="right" :label-width="100">
            <FormItem label="模块：">
                <i-input v-model="addData.subordinateModule"></i-input>
            </FormItem>
            <FormItem label="页面名称：">
                <i-input v-model="addData.pageName"></i-input>
            </FormItem>
            <FormItem label="页面URL">
                <i-input v-model="addData.pageIdentification"></i-input>
            </FormItem>
            <FormItem label="页面描述">
                <i-input v-model="addData.pageDescription" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="页面描述"></i-input>
            </FormItem>
          </i-form>
        </div>
        <div slot="footer">
            <i-button type="text" :loading="modal_loading" @click="reset">重置</i-button>
            <i-button type="primary" :loading="modal_loading" @click="ok">确定</i-button>
        </div>
    </Modal>
    <Modal
        v-model="modal2"
        title="修改页面">
        <div>
          <i-form :model="editData" label-position="right" :label-width="100">
            <FormItem label="模块：">
                <i-input v-model="editData.subordinateModule"></i-input>
            </FormItem>
            <FormItem label="页面名称：">
                <i-input v-model="editData.pageName"></i-input>
            </FormItem>
            <FormItem label="页面URL">
                <i-input v-model="editData.pageIdentification"></i-input>
            </FormItem>
            <FormItem label="页面描述">
                <i-input v-model="editData.pageDescription" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="页面描述"></i-input>
            </FormItem>
          </i-form>
        </div>
        <div slot="footer">
            <i-button type="text" :loading="modal_loading" @click="reset2">重置</i-button>
            <i-button type="primary" :loading="modal_loading" @click="editFun">保存</i-button>
        </div>
    </Modal>
  </div>
</template>

<script>
import {
  GetPermissionPageConfigAllInfo,
  AddPermissionPageConfig,
  UpdatePermissionPageConfig,
  UpdatePermissionPageConfigByIdsOrId
} from "@/api/permissionPageConfig";
export default {
  name: "home",
  components: {},
  data() {
    return {
      selectList: [], // 选中列表
      selectStr: "", // 选中列表id字符串
      pageIndex: 1, // 当前页
      modal_loading: false,
      addData: {
        subordinateModule: "",
        pageName: "",
        pageIdentification: "",
        pageDescription: ""
      },
      editData: {
        subordinateModule: "",
        pageName: "",
        pageIdentification: "",
        pageDescription: ""
      },
      editId: "",
      editDelete: "",
      modal: false,
      modal2: false,
      loading: false,
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "ID",
          type: "index",
          width: 80,
          align: "center"
        },
        {
          title: "模块",
          key: "subordinateModule",
          align: "center"
        },
        {
          title: "页面名称",
          key: "pageName",
          align: "center"
        },
        {
          title: "URL",
          key: "pageIdentification",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.deleteBtn(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ],
      listData: {}
    };
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    // 获取用户列表数据
    getListFun() {
      this.$set(this, "loading", true);
      const p = {
        pageIndex: this.pageIndex,
        pageSize: "10",
        keyWord: ""
      };
      GetPermissionPageConfigAllInfo(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "listData", res.data.result);
          }
          this.$set(this, "loading", false);
        })
        .catch(err => {
          console.log(err);
          this.$set(this, "loading", false);
        });
    },
    // 新增接口
    addFun() {
      const p = {
        subordinateModule: this.addData.subordinateModule,
        pageName: this.addData.pageName,
        pageIdentification: this.addData.pageIdentification,
        pageDescription: this.addData.pageDescription
      };
      AddPermissionPageConfig(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "addData", {
              subordinateModule: "",
              pageName: "",
              pageIdentification: "",
              pageDescription: ""
            });
            this.getListFun();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    custom() {
      this.$Modal.confirm({
        title: "Title",
        content: "<p>Content of dialog</p><p>Content of dialog</p>",
        okText: "OK",
        cancelText: "Cancel"
      });
    },
    // 分页回调方法
    changePage(index) {
      this.$set(this, "pageIndex", index);
      this.getListFun();
    },
    ok() {
      this.addFun();
      this.$set(this, "modal", false);
    },
    editFun() {
      const p = {
        subordinateModule: this.editData.subordinateModule,
        pageName: this.editData.pageName,
        pageIdentification: this.editData.pageIdentification,
        pageDescription: this.editData.pageDescription,
        id: this.editId,
        editDelete: this.editDelete
      };
      UpdatePermissionPageConfig(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "editData", {
              subordinateModule: "",
              pageName: "",
              pageIdentification: "",
              pageDescription: ""
            });
            this.getListFun();
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.$set(this, "modal2", false);
    },
    edit(params) {
      this.$set(this, "editData", {
        subordinateModule: params.row.subordinateModule,
        pageName: params.row.pageName,
        pageIdentification: params.row.pageIdentification,
        pageDescription: params.row.pageDescription
      });
      this.$set(this, "editId", params.row.id);
      this.$set(this, "editDelete", params.row.editDelete);
      this.$set(this, "modal2", true);
    },
    deleteFun(ids) {
      const p = {
        idsStr: ids,
        IsDelete: 1
      };
      UpdatePermissionPageConfigByIdsOrId(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "selectList", []);
            this.$set(this, "selectStr", "");
            this.getListFun();
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.$set(this, "modal2", false);
    },
    deleteBtn(params) {
      this.deleteFun(String(params.row.id));
      debugger;
    },
    reset() {
      this.$set(this, "addData", {
        subordinateModule: "",
        pageName: "",
        pageIdentification: "",
        pageDescription: ""
      });
    },
    deleteList() {
      this.deleteFun(String(this.selectStr));
    },
    selectChange(list) {
      var str = "";
      this.$set(this, "selectStr", "");
      for (var i = 0; i < list.length; i++) {
        str = str + "," + list[i].id;
      }
      this.$set(this, "selectList", list);
      this.$set(this, "selectStr", str);
      debugger;
    },
    reset2() {
      this.$set(this, "editData", {
        subordinateModule: "",
        pageName: "",
        pageIdentification: "",
        pageDescription: ""
      });
    }
  }
};
</script>

<style lang="less">
.myRow {
  width: 100%;
  margin: 0px 0px 10px;
  display: flex;
  justify-content: space-between;
}
.myButton {
  margin-right: 6px;
}
.footPage {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
</style>
